<template>
  <div>
    <div @click="show"><slot></slot></div>
    <ModalPanel
      :visible="visible"
      :width="400"
      :title="t('表单字段配置人员')"
      @submit="submit"
      @close="close"
    >
      <div class="title">
        <NodeHead :node-name="t('表单字段列表')" />
      </div>
      <div class="list-box" v-if="Object.keys(expandedNames).length > 0">
        <a-tree
          checkable
          :tree-data="nodes.treeData"
          autoExpandParent
          defaultExpandAll
          v-model:checkedKeys="checkedKeys"
        />
      </div>
      <EmptyBox v-else />
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { BpmnNodeKey, MemberType } from '/@/enums/workflowEnum';
  import { FormFiledConfig, MemberConfig } from '/@/model/workflow/memberSetting';
  import { ModalPanel, EmptyBox } from '/@/components/ModalPanel/index';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { TreeProps } from 'ant-design-vue';
  import { separator } from '../../config/info';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const emits = defineEmits(['change']);
  const props = withDefaults(
    defineProps<{
      memberList: Array<MemberConfig>;
    }>(),
    {
      memberList: () => {
        return [];
      },
    },
  );

  const visible = ref(false);
  const memberType = MemberType.FORM_FIELD;
  let nodes: { treeData: TreeProps['treeData'] } = reactive({
    treeData: [],
  });
  const checkedKeys = ref<string[]>([]);
  const expandedNames = ref<{}>({});
  let selectedList: { list: Array<MemberConfig> } = reactive({ list: [] });
  function show() {
    checkedKeys.value = [];
    nodes.treeData = [];
    if (props.memberList.length > 0) {
      selectedList.list = props.memberList.filter((ele: MemberConfig) => {
        if (ele.memberType === memberType) return ele;
      });

      if (selectedList.list.length > 0) {
        selectedList.list.forEach((ele) => {
          if (ele.formFieldConfig) {
            checkedKeys.value.push(
              ele.formFieldConfig.nodeId +
                separator +
                ele.formFieldConfig.formId +
                separator +
                ele.formFieldConfig.formField +
                separator +
                ele.formFieldConfig.formKey,
            );
          }
        });
      }
    }
    const store = useBpmnStore();
    const { info } = store;
    for (let item of info.values()) {
      let showNodeTypes = [BpmnNodeKey.START, BpmnNodeKey.USER];
      if (showNodeTypes.includes(item.type)) {
        let name = item.name ? item.name : item.type;
        let id = item.id;
        let info: FormFiledConfig = {
          title: name,
          key: id,
          disabled: true,
          children: [],
        };
        if (item.formConfigs && item.formConfigs.length > 0) {
          item.formConfigs.forEach((ele1) => {
            let formChildren: Array<FormFiledConfig> = [];
            if (ele1.children && ele1.children.length > 0) {
              ele1.children.forEach((ele2) => {
                let key =
                  id + separator + ele1.formId + separator + ele2.fieldId + separator + ele1.key;
                formChildren.push({
                  title: ele2.fieldName,
                  key,
                  disabled: false,
                  children: [],
                });
                expandedNames.value[key] = name + '-' + ele1.formName + '-' + ele2.fieldName;
              });
            }
            info.children.push({
              title: ele1.formName,
              key: id + separator + ele1.formId,
              disabled: true,
              children: formChildren,
            });
          });
        }
        nodes.treeData.push(info);
      }
    }

    visible.value = true;
  }
  function submit() {
    let list: Array<MemberConfig> = [];
    if (props.memberList.length > 0) {
      list = props.memberList.filter((ele: MemberConfig) => {
        if (ele.memberType != memberType) return ele;
      });
    }
    console.log(checkedKeys.value, 'sss');
    for (const item of checkedKeys.value) {
      let arr = item.split(separator);
      if (arr.length === 4) {
        let nodeId = arr[0];
        let formId = arr[1];
        let formField = arr[2];
        let formKey = arr[3];
        list.push({
          memberType: memberType,
          id: nodeId,
          name: expandedNames.value[item],
          formFieldConfig: { nodeId, formId, formField, formKey },
        });
      }
    }
    console.log(list, 'list');
    emits('change', [...list]);
    close();
  }
  function close() {
    visible.value = false;
  }
</script>

<style scoped>
  .title {
    display: flex;
    justify-content: space-between;
    height: 40px;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
  }

  .list-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
  }

  :deep(.ant-tree-treenode) {
    margin-left: 8px;
    margin-bottom: 10px;
  }

  :deep(.ant-tree-list) {
    height: 460px;
  }
</style>
